<!--
 * @Date         : 2023-11-06 23:03:00
 * @LastEditTime : 2023-11-21 21:23:22
 * @description  : 登录页面
-->
<template>
  <view class="login">
    <div class="header">
      <view class="header-bg">
        <u-image
          height="50vh"
          width="100%"
          src="https://cdn.yfzxzjysg.top/ysgimgs/login-bg20231116215741.png"
        ></u-image>
      </view>
      <view class="logo">
        <u-image
          style=""
          :src="require('@/assets/logo.png')"
          height="246rpx"
          width="246rpx"
        ></u-image>
      </view>
    </div>
    <view class="buttonstyle">
      <div class="button-1">
        <u-button
          type="primary"
          color=" #E04411"
          shape="circle"
          text="选择学校"
          size="large"
          @click="onClilckSchool"
        ></u-button>
      </div>
      <u-button
        width="526rpx"
        color=" #E04411"
        type="primary"
        shape="circle"
        size="large"
        lang="zh_CN"
        @click="getuserinfo"
        text="微信登录"
      ></u-button>
    </view>
    <div class="foolter" @click="login">
      <view> 游客预览</view>
      <u-icon
        style="margin-left: 10rpx"
        name="arrow-right"
        color="#2979ff"
        size="14"
      ></u-icon>
    </div>
    <!-- 选择学校 -->
    <u-popup :show="show" mode="center" round="10">
      <view class="school-popup">
        <div class="school-header">
          <u--image
            :src="require('@/assets/login-popup.png')"
            width="601rpx"
            height="215rpx"
          ></u--image>
        </div>
        <scroll-view :scroll-y="true" class="scrollview">
          <view
            class="row"
            v-for="item in list"
            :key="item.id"
            @click="onRow(item.id)"
          >
            <u--image
              :src="item.logo"
              width="115rpx"
              height="115rpx"
            ></u--image>
            <view class="name"> {{ item.name }} </view>
            <view class="slice">
              <u--image
                :src="require('@/assets/slice.png')"
                width="29rpx"
                height="29rpx"
                v-if="value !== item.id"
              ></u--image>
              <u--image
                v-else
                :src="require('@/assets/slice-a.png')"
                width="29rpx"
                height="29rpx"
              ></u--image>
            </view>
          </view>
        </scroll-view>
        <div class="bottom" @click="onSure">确认选择</div>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { wx_mini_login } from "@/apis/modules/user";
import { setStorage } from "@/utils/auth";
import { getUserinfo, get_school } from "apis/modules/user";
export default {
  name: "login",

  data() {
    return {
      value: "",
      show: false,
      list: [],
    };
  },

  onLaunch() {},
  onShow() {},
  onLoad() {
    this.getSchool();
  },
  onHide() {},
  methods: {
    onRow(id) {
      this.value = id;
    },
    onSure() {
      if (this.value) {
        setStorage("school_id", this.value);
        this.show = false;
      } else {
        uni.showToast({
          title: "请选择学校",
          duration: 2000,
          icon: "none",
        });
      }
    },
    getSchool() {
      get_school().then((res) => {
        this.list = res;
      });
    },
    onClilckSchool() {
      this.show = true;
    },
    getuserinfo() {
      let that = this;
      let { fullPath, course_id } = this.$Route.query;
      console.log(fullPath, course_id);
      if (!this.value) {
        // uni.showToast({
        //   title: "请先选择学校!!",
        //   duration: 2000,
        //   icon: "none",
        // });
        this.onClilckSchool();
        return;
      }
      uni.login({
        provider: "weixin",
        onlyAuthorize: true, // 微信登录仅请求授权认证
        success: function (event) {
          const { code } = event;
          //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
          console.log(code, that);
          uni.getUserInfo({
            provider: "weixin",
            success: function (infoRes) {
              wx_mini_login({ ...infoRes, code }).then((res) => {
                if (res?.token) {
                  setStorage("token", res.token);
                  getUserinfo().then((info) => {
                    setStorage("userInfo", info);
                    if (fullPath) {
                      uni.redirectTo({
                        url: `${fullPath}?course_id=${course_id}`,
                      });
                    } else {
                      that.$Router.pushTab({ path: "/pages/home/index" });
                    }
                  });
                } else {
                  uni.showToast({
                    title: res.message,
                    duration: 2000,
                    icon: "none",
                  });
                }
              });
            },
          });
          // 登录成功
        },
        fail: function (err) {
          // 登录授权失败
          // err.code是错误码
        },
      });
    },
    login() {
      let that = this;
      if (this.value) {
        that.$Router.pushTab({ path: "/pages/home/index" });
      } else {
        this.onClilckSchool();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
}
.header {
  padding: 180rpx 40rpx 0;
  box-sizing: border-box;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  // background: linear-gradient(180deg, #8a0019 0%, #fa5f00 100%);
  &-bg {
    width: 100%;
    z-index: 1;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .logo {
    position: relative;
    z-index: 2;
  }
}
.buttonstyle {
  padding: 80rpx 100rpx;
  .button-1 {
    margin-bottom: 50rpx;
  }
}
.foolter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 30rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #6d6d6d;
  margin-top: 164rpx;
}
.school-popup {
  width: 601rpx;
  height: 913rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .school-header {
    flex-shrink: 0;
  }
  .scrollview {
    width: 100%;
    flex: 1;
    overflow: hidden;
    .row {
      display: flex;
      align-items: center;
      padding: 20rpx;
      box-sizing: border-box;
      .name {
        flex: 1;
        margin: 0 20rpx;
        font-size: 28rpx;
        font-weight: 800;
        color: #333333;
      }
      .slice {
        flex-shrink: 0;
        width: 40rpx;
      }
    }
  }
  .bottom {
    width: 504rpx;
    height: 93rpx;
    background: #e04411;
    border-radius: 47rpx;
    font-size: 28rpx;
    font-weight: 800;
    color: #ffffff;
    line-height: 93rpx;
    text-align: center;
    flex-shrink: 0;
    margin: 20rpx 0;
  }
}
</style>
